<template>
	<view>
		<view style="width: 100%; height: 300rpx;" class="top">
		</view>
		<uni-card :is-shadow="false" is-full
			style=" height: 500rpx; display: flex; align-items: center; justify-content: center;width: 85%; margin-left: 40rpx; border-radius: 20rpx; position: relative;top: -300rpx;">
			<map style="border-radius: 20rpx; width: 650rpx; height: 450rpx;"></map>




		</uni-card>


		<uni-card :is-shadow="false" is-full
			style=" height: 750rpx; display: flex; align-items: center; justify-content: center;width: 85%; margin-left: 40rpx; border-radius: 20rpx; position: relative;top: -280rpx;">



			<view style="margin-top: -100rpx;" class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" class="custom-segmented-control" />
			</view>


			<view style="margin-top: 150rpx;" class="content">
				<view v-if="current === 0">
					<uni-forms ref="baseForm" :modelValue="cheRescue">
						<uni-forms-item label="位置" required>
							<uni-easyinput v-model="cheRescue.address" placeholder="请输入位置" />
						</uni-forms-item>

						<uni-forms-item required>

							<div style="display: flex;" class="form-group">
								<label for="bank-select" style="margin-right: 40px;">求助人</label>
								<view>{{usernamee}}</view>


							</div>


						</uni-forms-item>
						<uni-forms-item label="车牌" required>
							<uni-easyinput v-model="cheRescue.cheCar.carNumber" placeholder="请输入车牌号" />
						</uni-forms-item>


						<uni-forms-item label="联系方式" required>
							<uni-easyinput v-model="cheRescue.phone" placeholder="请输入联系方式" />
						</uni-forms-item>

					</uni-forms>
					<button
						style="background-color: orangered; border-radius: 20rpx; height: 60rpx; line-height: 60rpx; color: white;"
						@click="addjiuyuan()">呼叫救援</button>
					<navigator url="/pages/kk/jiuyuanjilu/jiuyuanjilu" style="margin-top: 10rpx;">救援记录</navigator>


				</view>



				<view v-if="current === 1">
					<uni-forms ref="baseForm" :modelValue="cheRescue">
						<uni-forms-item label="位置" required>
							<uni-easyinput v-model="cheRescue.address" placeholder="请输入位置" />
						</uni-forms-item>

						<uni-forms-item required>

							<div style="display: flex;" class="form-group">
								<label for="bank-select" style="margin-right: 40px;">求助人</label>
								<view>{{usernamee}}</view>


							</div>


						</uni-forms-item>
						<uni-forms-item label="车牌" required>
							<uni-easyinput v-model="cheRescue.cheCar.carNumber" placeholder="请输入车牌号" />
						</uni-forms-item>


						<uni-forms-item label="联系方式" required>
							<uni-easyinput v-model="cheRescue.phone" placeholder="请输入联系方式" />
						</uni-forms-item>

					</uni-forms>
					<button
						style="background-color: orangered; border-radius: 20rpx; height: 60rpx; line-height: 60rpx; color: white;"
						@click="addjiuyuan()">呼叫救援</button>
					<navigator url="/pages/kk/jiuyuanjilu/jiuyuanjilu" style="margin-top: 10rpx;">救援记录</navigator>





				</view>
				<view v-if="current === 2">
					<uni-forms ref="baseForm" :modelValue="cheRescue">
						<uni-forms-item label="位置" required>
							<uni-easyinput v-model="cheRescue.address" placeholder="请输入位置" />
						</uni-forms-item>

						<uni-forms-item required>

							<div style="display: flex;" class="form-group">
								<label for="bank-select" style="margin-right: 40px;">求助人</label>
								<view>{{usernamee}}</view>


							</div>


						</uni-forms-item>
						<uni-forms-item label="车牌" required>
							<uni-easyinput v-model="cheRescue.cheCar.carNumber" placeholder="请输入车牌号" />
						</uni-forms-item>



						<uni-forms-item label="终点" required>
							<uni-easyinput v-model="cheRescue.end" placeholder="请输入终点" />
						</uni-forms-item>

						<uni-forms-item label="联系方式" required>
							<uni-easyinput v-model="cheRescue.phone" placeholder="请输入联系方式" />
						</uni-forms-item>

					</uni-forms>
					<button
						style="background-color: orangered; border-radius: 20rpx; height: 60rpx; line-height: 60rpx; color: white;"
						@click="addjiuyuan()">呼叫救援</button>
					<navigator url="/pages/kk/jiuyuanjilu/jiuyuanjilu" style="margin-top: 10rpx;">救援记录</navigator>



				</view>
			</view>
		</uni-card>

		<uni-card :is-shadow="false" is-full
			style=" height: 250rpx; width: 85%; margin-left: 40rpx; border-radius: 20rpx; position: relative;top: -250rpx;">
			<view style="font-size: 40rpx; font-weight: 600;">警务救援</view>
			<view style="display: flex; justify-content: space-around; margin-top: 20rpx;">
				<view style="width: 150rpx;">
					<view style="width: 150rpx; text-align: center;">
						<image src="../../../static/jtsw.png" style="width: 40rpx; height: 40rpx;"></image>
					</view>

					<view style="width: 150rpx; text-align: center;">交通事务</view>
					<view style="width: 150rpx; text-align: center;">122</view>
				</view>

				<view style="width: 150rpx;">
					<view style="width: 150rpx; text-align: center;">
						<image src="../../../static/jtsw.png" style="width: 40rpx; height: 40rpx;"></image>
					</view>

					<view style="width: 150rpx; text-align: center;">交通事务</view>
					<view style="width: 150rpx; text-align: center;">122</view>
				</view>

				<view style="width: 150rpx;">
					<view style="width: 150rpx; text-align: center;">
						<image src="../../../static/jtsw.png" style="width: 40rpx; height: 40rpx;"></image>
					</view>

					<view style="width: 150rpx; text-align: center;">交通事务</view>
					<view style="width: 150rpx; text-align: center;">122</view>
				</view>

				<view style="width: 150rpx;">
					<view style="width: 150rpx; text-align: center;">
						<image src="../../../static/jtsw.png" style="width: 40rpx; height: 40rpx;"></image>
					</view>

					<view style="width: 150rpx; text-align: center;">交通事务</view>
					<view style="width: 150rpx; text-align: center;">122</view>
				</view>


			</view>


		</uni-card>





	</view>
</template>

<script>
	export default {
		data() {
			return {

				listuserdemo: '',

				cheUserr: '',
				usernamee: '',




				cheRescue: {
					end: '',
					type: '',
					userId: '',
					phone: '',
					address: '',
					cheCar: {
						carNumber: "",

					}

				},




				items: ['搭电', '换胎', '拖车'],
				current: 0,
				styleType: 'text',
				activeColor: '#007aff',

			}
		},

		onLoad() {

			this.listuser()
			this.getqiuzhuren()
		},

		methods: {



			getqiuzhuren() {


				const id = this.getCookie("userid")
				let that = this


				this.$http({


					url: "api/user/userr/getxiangxi/" + id,
					method: "get",
					success(res) {
						that.cheRescue.userId = res.data.data.id

						that.usernamee = res.data.data.sysUser.userName


					}
				})
			},






			getCookie(name) {
				const nameEQ = name + "=";
				const cookies = document.cookie.split(';');
				for (let i = 0; i < cookies.length; i++) {
					let c = cookies[i].trim();
					if (c.indexOf(nameEQ) === 0) {
						return decodeURIComponent(c.substring(nameEQ.length));
					}
				}
				return null;
			},


			change(e) {
				console.log("选中的值:", e);
			},


			listuser() {
				let that = this



				this.$http({
					url: "api/user/userr/list",
					method: "get",
					data: that.cheUserr,

					success(res) {
						console.log("list================")
						console.log(res.data.rows)
						that.listuserdemo = res.data.rows
					}
				})
			},







			addjiuyuan() {
				let that = this

				that.cheRescue.type = that.current

				this.$http({
					url: "api/rescue/rescue/",
					method: "post",
					data: that.cheRescue,
					success(res) {
						alert("呼叫成功")
					}
				})

			},


			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},


			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

		}
	}
</script>

<style>
	::v-deep .uni-forms-item {
		margin-bottom: 10px;
		/* 设置一个较小的下边距 */
	}


	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: 150px;
		text-align: center;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.uni-common-mt {
		margin-top: 30px;
	}


	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}


	.top {
		width: 100%;
		height: 270rpx;
		background-color: #2f81fa;
	}
</style>